/**
 * Created by suweiming on 2017/12/30.
 */
import React from 'react';
import {StyleSheet, PixelRatio, Text, View, TextInput, Image, TouchableHighlight} from 'react-native';
import {Form} from '../../css/form';
import {get, post, domain, Icon} from '../../lib/http';
import {Container, Content, Header, Badge, Left, Button, Body, Right, Footer, FooterTab} from "native-base";

export default class Home extends React.Component {

    render() {
        return (
            <Container style={CSS.container}>
                <Header
                    hasTabs
                    style={CSS.header}>
                    <Left>
                        <Icon style={CSS.headerIcon} name="ios-menu-outline" size={24}
                              onPress={() => this.props.navigation.navigate('DrawerToggle')}
                        />
                    </Left>
                </Header>
                <Content style={CSS.ctner}>
                    <View style={CSS.sum}>
                        <Text style={CSS.sumText}>驾驶证CRM</Text>
                    </View>
                    <View style={CSS.nav}>
                        <View style={CSS.gridColumn}>
                            <Button
                                primary
                                style={CSS.gridItemNoLeftRight}
                                onPress={() => this.props.navigation.navigate('Driver')}
                            >
                                <Text style={CSS.white}>驾驶证(22)</Text>
                            </Button>
                            <Button
                                style={CSS.gridItem}>
                                <Text style={CSS.white}>3个月内到期(2)</Text>
                            </Button>
                            <Button style={CSS.gridItemNoLeftRight}>
                                <Text style={CSS.white}>3个月内处理(2)</Text>
                            </Button>
                        </View>
                    </View>
                    <View style={CSS.gridColumn}>
                        <Button style={CSS.gridItemNoBorder}>
                            <Text style={CSS.white}>删除(3)</Text></Button>
                        <Button style={CSS.gridItemNoTopBottom}>
                            <Text style={CSS.white}>2月内待处理(3)</Text>
                        </Button>
                        <Button style={CSS.gridItemNoBorder}>
                            <Text style={CSS.white}>重点客户(3)</Text>
                        </Button>
                    </View>
                </Content>
            </Container>
        );
    }
}
const CSS = StyleSheet.create({
    header: {paddingTop: 30, backgroundColor: '#41a2fc', borderWidth: 0},
    headerText: {fontSize: 20, color: '#FFF'},
    headerIcon: {alignItems: 'flex-start', flex: 1, color: '#FFF'},
    menu: {backgroundColor: '#41a2fc', height: 40, paddingTop: 5, paddingLeft: 10},
    nav: {flex: 1, backgroundColor: '#FFF'},
    ctner: {
        borderWidth: 0,
    },
    sum: {
        height: 240,
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#41a2fc'
    },
    sumText: {
        color: '#FFF',
        marginTop: 60,
        fontSize: 30
    },
    white: {
        color: '#FFF',
    },
    container: {
        backgroundColor: '#40a2fc',
        borderWidth: 0,
        marginTop: 0,
        flex: 1,
        padding: 0,
    },
    gridColumn: {height: 100, flexDirection: 'row'},
    gridItem: {
        height: 100,

        flex: 1, borderRadius: 0,
        // borderWidth: 1 / PixelRatio.get(),
        backgroundColor: '#40a2fc',
        alignItems: 'center', justifyContent: 'center',
        paddingTop: 15,
    },
    gridItemNoLeftRight: {
        height: 100,
        flex: 1, backgroundColor: '#40a2fc',

        borderRadius: 0,
        // borderWidth: 1 / PixelRatio.get(),
        // borderLeftWidth: 0,
        // borderRightWidth: 0,
        // borderColor: '#ddd',
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop: 15,
    },
    gridItemNoTopBottom: {
        height: 100, borderRadius: 0,
        flex: 1,
        borderTopWidth: 0, backgroundColor: '#40a2fc',
        borderBottomWidth: 0,
        borderColor: '#ddd', justifyContent: 'center',
        alignItems: 'center',
        paddingTop: 15,
    },
    gridItemNoBorder: {
        height: 100,
        borderRadius: 0,
        flex: 1,
        backgroundColor: '#40a2fc',
        justifyContent: 'center',
        borderWidth: 0,
        alignItems: 'center',
        paddingTop: 15,
    }
});


